html,body{
    height: 100%;
    overflow: hidden;
}
#wrap{height: 100%;}

html,body,h1,h2,h3,h4,h5,h6,p,ul,li{
    margin: 0px;padding: 0px;font: 14px "微软雅黑";
}

li{
    list-style: none;
}
a{
    text-decoration: none;
    display: block;
}
img{
    display: block;
}



.clearfix{*zoom: 1;}
.clearfix:after{content: "";display: block;clear: both;}
.commonTile{color: #009ee0; font-size: 80px; line-height: 0.8; font-weight: bold;letter-spacing: -5px;}

.commonText{color: white;line-height: 1.5;font-size: 15px;}
/*头部样式开始*/
#head{background: white!important; width: 100%;}
#head .headMain{width: 1100px; height: 80px; margin: 0 auto; position: relative;}
#head .headMain > .logo{float: left; margin-top: 30px;}
#head .headMain > .nav{ float: right; margin-top: 50px; }
#head .headMain > .nav > .list > li{ float: left; margin-left: 40px; position: relative;}
#head .headMain > .nav > .list > li .up{width: 0; color: #000000; position: absolute; overflow: hidden; transition: 1s width;}
#head .headMain > .nav > .list > li:hover .up{ width: 100%; }
#head .headMain > .arrow{width: 21px; height: 11px; background: url('../img/menuIndicator.png');
    position: absolute;left: 50%; bottom: -11px;transition: 1s left;z-index: 2;}
/*头部样式结束*/

/*内容区域样式开始*/
#content{background: blueviolet; position: relative; overflow: hidden; width: 100%;}
#content > .list{position: absolute;left: 0;top: 0;width: 100%; transition: 1s top;}
#content > .list > li{position: relative; background-position: 50% 50%!important;overflow: hidden;}
#content > .list > li section{width: 1100px; height: 520px; position: absolute; left: 0; right: 0;
    bottom: 0; top: 0; margin: auto;}

/*第一屏开始*/
#content > .list .home{ background: url('../img/bg1.jpg') no-repeat; }

#content > .list .home .home1{width: 100%; height: 100%;perspective:1000px;transform-style: preserve-3d;}
#content > .list .home .home1 > li{height: 100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;visibility: hidden;}
#content > .list .home .home1 > li:nth-child(1){background: #dc6c5f;}
#content > .list .home .home1 > li:nth-child(2){background: #95dc84;}
#content > .list .home .home1 > li:nth-child(3){background: #64b9d2;}
#content > .list .home .home1 > li:nth-child(4){background: #000000;}
#content > .list .home .home1 > li >div{color: white;text-align: center; margin-top: 200px;}
#content > .list .home .home1 > li.active{visibility: visible;}

/*从左往右*/
#content > .list .home .home1 > li.leftHide{visibility: hidden; animation: 1s leftHide 1 linear;}
#content > .list .home .home1 > li.rightShow{visibility: visible; animation: 1s rightShow 1 linear;}
@keyframes leftHide{
    0%{
        visibility: visible;
    }
    50%{
        transform: translateX(-40%) rotateY(30deg) scale(0.8);
    }
    100%{
        transform: translateZ(-200px);
    }
}
@keyframes rightShow{
    0%{
        visibility: hidden;transform: translateZ(-200px);
    }
    50%{
        transform: translateX(40%) rotateY(-30deg) scale(0.8);
    }
    100%{

    }
}

/*从右往左*/
#content > .list .home .home1 > li.leftShow{visibility: visible; animation: 1s leftShow 1 linear;}
#content > .list .home .home1 > li.rightHide{visibility: hidden; animation: 1s rightHide 1 linear;}
@keyframes leftShow{

    0%{
        visibility: hidden;transform: translateZ(-200px);
    }
    50%{
        transform: translateX(-40%) rotateY(30deg) scale(0.8);
    }
    100%{

    }


}
@keyframes rightHide{
    0%{
        visibility: visible;
    }
    50%{
        transform: translateX(40%) rotateY(-30deg) scale(0.8);
    }
    100%{
        transform: translateZ(-200px);
    }
}



#content > .list .home .home2{position: absolute; left: 0;right: 0; bottom: 0;text-align: center;}
#content > .list .home .home2 > li{width: 20px;height: 20px;border-radius: 50%; background: rgba(255,255,255,0.5);
    display: inline-block;box-shadow: 0 0 4px rgba(25,25,25,0.8);cursor: pointer;}

#content > .list .home .home2 > li.active{background: white;cursor: default;}


/*第一屏结束*/


/*第二屏开始*/
#content > .list > .course{ background: url('../img/bg2.jpg') no-repeat;}
#content > .list > .course .course1{margin: 50px;position: relative;z-index: 2;}
#content > .list > .course .course2{margin-left: 50px; width: 400px;position: relative;z-index: 2;}
#content > .list > .course .course3{width: 480px; position: absolute; right: 50px;top: 70px;z-index: 2;}
#content > .list > .course .course3 > .item{float: left;width: 120px;height: 132px;position: relative;
    perspective: 500px;transform-style: preserve-3d;}
#content > .list > .course .course3 > .line{width: 9px;height: 410px; background: url(../img/plus_row.png) no-repeat;
    position: absolute; top: -7px;}
#content > .list > .course .course3 > .line:nth-of-type(1){left: -5px;}
#content > .list > .course .course3 > .line:nth-of-type(2){left: 115px;}
#content > .list > .course .course3 > .line:nth-of-type(3){left: 235px;}
#content > .list > .course .course3 > .line:nth-of-type(4){left: 355px;}
#content > .list > .course .course3 > .line:nth-of-type(5){left: 475px;}
#content > .list > .course .course3 > .item .face,#content > .list > .course .course3 > .item .backFace
{position: absolute;left: 0;top: 0;bottom: 0;right: 0;width: 100%;height: 100%;box-sizing: border-box;padding: 15px;transition: 1.5s transform}
#content > .list > .course .course3 > .item .backFace{background-position: 50% 50%!important;}
#content > .list > .course .course3 > .item:nth-of-type(1) .backFace{background: url(../img/apcoa.png) no-repeat;}
#content > .list > .course .course3 > .item:nth-of-type(2) .backFace{background: url(../img/binoli.png) no-repeat;}
#content > .list > .course .course3 > .item:nth-of-type(3) .backFace{background: url(../img/bks.png) no-repeat;}
#content > .list > .course .course3 > .item:nth-of-type(4) .backFace{background: url(../img/gu.png) no-repeat;}
#content > .list > .course .course3 > .item:nth-of-type(5) .backFace{background: url(../img/hlx.png) no-repeat;}
#content > .list > .course .course3 > .item:nth-of-type(6) .backFace{background: url(../img/lbs.png) no-repeat;}
#content > .list > .course .course3 > .item:nth-of-type(7) .backFace{background: url(../img/leonberg.png) no-repeat;}
#content > .list > .course .course3 > .item:nth-of-type(8) .backFace{background: url(../img/pcwelt.png) no-repeat;}
#content > .list > .course .course3 > .item:nth-of-type(9) .backFace{background: url(../img/tata.png) no-repeat;}
#content > .list > .course .course3 > .item:nth-of-type(10) .backFace{background: url(../img/bks.png) no-repeat;}
#content > .list > .course .course3 > .item:nth-of-type(11) .backFace{background: url(../img/bks.png) no-repeat;}
#content > .list > .course .course3 > .item:nth-of-type(12) .backFace{background: url(../img/bks.png) no-repeat;}
#content > .list > .course .course3 > .item .face{transform: rotateY(180deg); backface-visibility: hidden;
    background: #009ee0; color: white;}
#content > .list > .course .course3 > .item:hover .face{transform: rotateY(360deg);}
#content > .list > .course .course3 > .item:hover .backFace{transform: rotateY(180deg);}
/*第二屏结束*/



/*第三屏开始*/
#content > .list > .works{ background: url('../img/bg4.jpg') no-repeat;}
#content > .list > .works > section > .works1{margin: 50px 0px 100px 50px;position: relative;z-index: 2;}
#content > .list > .works > section > .works2{margin-left: 50px; position: relative;z-index: 2;}
#content > .list > .works > section > .works2 > .item{float: left; width: 220px; height: 133px; margin: 0 1px; position: relative;
    overflow: hidden;}
#content > .list > .works > section > .works2 > .item:last-of-type{width: 332px;}
#content > .list > .works > section > .works2 > .item > img{transition: 1s transform;}
#content > .list > .works > section > .works2 > .item > .mark{position: absolute;bottom: 0;left: 0;top: 0;right: 0;
    box-sizing: border-box; padding: 10px;background-color: #000000;opacity: 0;
    color: white; transition: 1s opacity;}
#content > .list > .works > section > .works2 > .item > .mark > .icon{width: 32px;height: 34px;margin: 0 auto;margin-top: 10px;
    background: url(../img/zoomico.png) no-repeat; transition: 1s background-position;}
#content > .list > .works > section > .works2 > .item > .mark > .icon:hover{background-position: 0 -34px;}
#content > .list > .works > section > .works2 > .item:hover > .mark{opacity: 0.8;}
#content > .list > .works > section > .works2 > .item:hover > img{transform: rotate(30deg) scale(1.5);}

#content > .list > .works > section > .works3{width: 167px;height: 191px;background: url(../img/robot.png) no-repeat; position: relative;z-index: 2;
    left: 900px;top: 170px;position: absolute;animation: works3Move 5s linear infinite;}
@keyframes works3Move{
    0%{
        transform: translateX(0px) rotateY(0deg);
    }
    49%{
        transform: translateX(-490px) rotateY(0deg);
    }
    50%{
        transform: translateX(-500px) rotateY(180deg);
    }
    100%{
        transform: translateX(0px) rotateY(180deg);
    }
}


/*第三屏结束*/

/*第四屏开始*/
#content > .list > .about{ background: url('../img/bg3.jpg') no-repeat;}
#content > .list > .about .about1{margin: 50px 0 100px 50px;}
#content > .list > .about .about2{margin-left: 50px; width: 400px;}
#content > .list > .about .about3 > .item{width: 260px; height: 200px; border: 5px solid rgba(255,255,255,0.5);
    border-radius: 8px;position: absolute;overflow: hidden;}

#content > .list > .about .about3 > .item:nth-child(1){left: 750px;top: 50px;z-index: 2 ;}
#content > .list > .about .about3 > .item:nth-child(2){left: 600px;top: 290px;z-index: 2 ;}
#content > .list > .about .about3 > .item > span,#content > .list > .about .about3 > .item > ul{
    position: absolute ; left: 0; right: 0; top: 0;bottom: 0;
}
#content > .list > .about .about3 > .item:nth-child(1) > span{background: url(../img/about1.jpg) no-repeat; transform: scale(1.5);
    transition: 1s transform;}
#content > .list > .about .about3 > .item:nth-child(2) > span{background: url(../img/about4.jpg) no-repeat; transform: scale(1.5);
    transition: 1s transform;}
#content > .list > .about .about3 > .item:hover span{transform: scale(1);}


#content > .list > .about .about4{width: 357px; height: 998px;background: url(../img/greenLine.png)no-repeat; position: absolute;
    left: 50%;top: -100px;}

#content > .list > .about .about3 > .item > ul >li{float: left;position: relative; overflow: hidden;}
#content > .list > .about .about3 > .item > ul > li > img{position: absolute;transition:  1s top,1s left;}



/*第四屏结束*/


/*第五屏开始*/
#content > .list > .team{background: url(../img/bg5.jpg) no-repeat;}
#content > .list > .team .team1{width: 400px;margin: 50px;float: left;}
#content > .list > .team .team2{width: 400px;margin: 50px;float: right;}
#content > .list > .team .team3{width: 944px;height: 448px; position: absolute;left: 50%;margin-left: -472px; margin-top: 250px;}
#content > .list > .team .team3 ul{position: relative;height: 100%;}
#content > .list > .team .team3 ul > li{width: 118px;height: 100%;background: url(../img/team.png) no-repeat;
    float: left; transition: 1s opacity;}
#content > .list > .team .team3 ul > li:nth-child(1){background-position: 0 , 0;}
#content > .list > .team .team3 ul > li:nth-child(2){background-position: -118px , 0;}
#content > .list > .team .team3 ul > li:nth-child(3){background-position: -236px , 0;}
#content > .list > .team .team3 ul > li:nth-child(4){background-position: -354px , 0;}
#content > .list > .team .team3 ul > li:nth-child(5){background-position: -472px , 0;}
#content > .list > .team .team3 ul > li:nth-child(6){background-position: -590px , 0;}
#content > .list > .team .team3 ul > li:nth-child(7){background-position: -708px , 0;}
#content > .list > .team .team3 ul > li:nth-child(8){background-position: -826px , 0;}

#content > .list > .team canvas{position: absolute;top:50px;}


/*第五屏结束*/

/*小圆点*/
#content > .dot{position: fixed;right: 10px; top: 50%;}
#content > .dot > li{width: 10px; height: 10px; border: 5px solid pink;z-index: 99;border-radius: 50%; margin-top: 10px;}

#content > .dot > li.active{background: white;}

/*内容区域样式结束*/


/*出入场*/
#content > .list .home .home1,#content > .list .home .home2{transition: 1s transform, 1s opacity;}
#content  .course .plane1{ width:359px; height:283px; background:url(../img/plane1.png) no-repeat; position:absolute; left:300px; top:-100px; transition:1s;}
#content  .course .plane2{ width:309px; height:249px; background:url(../img/plane2.png) no-repeat; position:absolute; left:-100px; top:200px; transition:1s;}
#content  .course .plane3{ width:230px; height:182px; background:url(../img/plane3.png) no-repeat; position:absolute; left:300px; top:400px; transition:1s;}
#content  .works .pencel1{ width:180px; height:97px; background:url(../img/pencel1.png) no-repeat; position:absolute; transition:1s; left:500px; top:0;}
#content  .works .pencel2{ width:268px; height:38px; background:url(../img/pencel2.png) no-repeat; position:absolute; transition:1s; left:300px; top:250px;}
#content  .works .pencel3{ width:441px; height:231px; background:url(../img/pencel3.png) no-repeat; position:absolute; transition:1s; left:650px; top:300px;}

#content > .list > .about .about3 > .item,#content > .list > .team .team1,#content > .list > .team .team2{transition:1s transform ;}

/*音频*/
#head > .headMain > .music{width: 14px; height: 14px; background: url(../img/musicon.gif);float: left; margin: 50px 0 0 5px;}

/*开机动画*/
#mask{width: 100%; height:100%; position:absolute; z-index:100;}

#mask .up{width: 100%;height:50%; background: deepskyblue; transition: 1s height;}
#mask .down{width: 100%; height:50%; background: deepskyblue; transition: 1s height;position: absolute; bottom: 0;}
#mask .line{height: 4px; width: 0px; z-index: 110; background: white;position: absolute;left: 0;top: 50%;
    margin-top: -2px;transition: 1s width;}

